<!--
*@Author: QWP
*@Description: 功能导航
*@Date: 2024-07-15 09:15:16
-->
<template>
  <a-layout class="f-h-100">
    <a-layout-content style="overflow: auto;">
      <u-busi-card v-for="it in navigates" :title="it.title"
        style="background-color: unset;">
        <a-list :grid="{ gutter: 12, xs: 3, sm: 3, md: 3, lg: 4, xl: 5, xxl: 6 }" :data-source="it.children">
          <template #renderItem="{ item }">
            <a-list-item style="padding: 0;" class="f-item-hover" @click="toJump(item)">
              <a-card style="cursor:pointer "
                :bodyStyle="{padding: '16px'}">
                <a-row :gutter="16">
                  <a-col flex="56px">
                    <div class="u-item-icon" :style="{ backgroundColor: item.iconBgColor }">
                      <u-icon-font :type="item.icon" style="color: #fff;font-size: 24px;"></u-icon-font>
                    </div>
                  </a-col>
                  <a-col flex="1" style="display: flex;align-items: center;">
                    <a-space direction="vertical" class="f-margin-l12">
                      <span class="u-span-title" :title="item.title">{{ item.title }}</span>
                    </a-space>
                  </a-col>
                </a-row>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
      </u-busi-card>
    </a-layout-content>
  </a-layout>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue'

import { useRoute, useRouter } from 'vue-router'
import {
  FolderOpenOutlined,
  LaptopOutlined,
  DesktopOutlined,
  CarOutlined,
  InsertRowBelowOutlined,
} from '@ant-design/icons-vue'

const router = useRouter();

const navigates = reactive<any[]>([
  {
    title: '公文管理',
    children: [
      {
        icon: 'icon-gongwenguanli', title: '发文拟稿', describe: '新增发文信息填报', iconBgColor: '#1890FF',
        path: '/TransitIndex/DispatchDoc/1'
      },
      {
        icon: 'icon-gongwenguanli', title: '发文签批', describe: '新增发文信息填报', iconBgColor: '#52C41A',
        path: '/TransitIndex/DispatchDoc/2'
      },
      {
        icon: 'icon-gongwenguanli', title: '收文登记', describe: '新增发文信息填报', iconBgColor: '#FA8C16',
        path: '/TransitIndex/IncomeDoc/1'
      },
      // {
      //   icon: 'icon-gongwenguanli', title: '收文登记审核', describe: '新增发文信息填报', iconBgColor: '#13C2C2',
      //   path: '/TransitIndex/IncomeDoc/2'
      // },
      {
        icon: 'icon-gongwenguanli', title: '收文查询', describe: '新增发文信息填报', iconBgColor: '#13C2C2',
        path: '/TransitIndex/IncomeDoc/4'
      },
      {
        icon: 'icon-gongwenguanli', title: '公文查询', describe: '新增发文信息填报', iconBgColor: '#E3C60A',
        path: '/TransitIndex/DocSearch'
      },
      {
        icon: 'icon-gongwenguanli', title: '发文统计', describe: '新增发文信息填报', iconBgColor: '#1890FF',
        path: '/TransitIndex/DispatchDocReport'
      },
      {
        icon: 'icon-gongwenguanli', title: '收文统计', describe: '新增发文信息填报', iconBgColor: '#52C41A',
        path: '/TransitIndex/IncomeDocReport'
      },
    ]
  },
  {
    title: '考勤管理',
    children: [
      { icon: 'icon-qingjia', title: '我的考勤', describe: '会议申请填报', iconBgColor: '#1890FF', path: '/TransitIndex/MyCheckIn' },
      { icon: 'icon-bumenkaoqin-mian', title: '部门考勤', describe: '会议室使用情况明细表', iconBgColor: '#52C41A ', path: '/TransitIndex/DeptCheckIn' },
      { icon: 'icon-beiqinguanli-mian', title: '备勤管理', describe: '会议室使用情况明细表', iconBgColor: '#FA8C16 ', path: '/TransitIndex/BeDuty' },
      { icon: 'icon-zhibanguanli-mian', title: '值班管理 ', describe: '会议室使用情况明细表', iconBgColor: '#13C2C2 ', path: '/TransitIndex/OnGuard' },
    ]
  },
  {
    title: '差旅管理',
    children: [
      { icon: 'icon-chuchashenqing', title: '差旅申请', describe: '出差申请填报', iconBgColor: '#1890FF', path: '/TransitIndex/OaTravel/1' },
    ]
  },
  {
    title: '车辆管理',
    children: [
      { icon: 'icon-cheliang-mian', title: '车辆基本信息管理', describe: '会议申请填报', iconBgColor: '#1890FF', path: '/TransitIndex/OaCarBaseInfo' },
      { icon: 'icon-cheliang-mian', title: '驾驶员信息配置', describe: '申请的会议快速审核', iconBgColor: '#52C41A', path: '/TransitIndex/Driver' },
      { icon: 'icon-cheliang-mian', title: '派车申请', describe: '可新增会议室或使用会议室', iconBgColor: '#FA8C16', path: '/TransitIndex/OaSendCar/1' },
      { icon: 'icon-cheliang-mian', title: '派车确认', describe: '会议室使用情况明细表', iconBgColor: '#13C2C2 ', path: '/TransitIndex/OaSendCar/3' },
      { icon: 'icon-cheliang-mian', title: '派车归队', describe: '会议申请填报', iconBgColor: '#1890FF', path: '/TransitIndex/OaCarSendReturn' },
      { icon: 'icon-cheliang-mian', title: '车辆保险 ', describe: '申请的会议快速审核', iconBgColor: '#52C41A', path: '/TransitIndex/OaCarInsure/1' },
      { icon: 'icon-cheliang-mian', title: '车辆保险分析', describe: '可新增会议室或使用会议室', iconBgColor: '#FA8C16', path: '/TransitIndex/OaCarInsure/2' },
      { icon: 'icon-cheliang-mian', title: '车辆年检', describe: '会议室使用情况明细表', iconBgColor: '#13C2C2 ', path: '/TransitIndex/OaCaryearCheck/1' },
      { icon: 'icon-cheliang-mian', title: '车辆年检分析', describe: '会议申请填报', iconBgColor: '#1890FF', path: '/TransitIndex/OaCaryearCheck/2' },
      { icon: 'icon-cheliang-mian', title: '维修保养', describe: '申请的会议快速审核', iconBgColor: '#52C41A', path: '/TransitIndex/OaCarMaintain/1' },
      { icon: 'icon-cheliang-mian', title: '维修分析', describe: '可新增会议室或使用会议室', iconBgColor: '#FA8C16', path: '/TransitIndex/OaCarMaintain/2' },
      { icon: 'icon-cheliang-mian', title: '保养分析', describe: '会议室使用情况明细表', iconBgColor: '#13C2C2 ', path: '/TransitIndex/OaCarMaintain/3' },
      { icon: 'icon-cheliang-mian', title: '合作机构', describe: '会议室使用情况明细表', iconBgColor: '#1890FF ', path: '/TransitIndex/OaCarCooperation' },
    ]
  },
  {
    title: '会议管理',
    children: [
      { icon: 'icon-huiyishishiyong', title: '会议申请', describe: '会议申请填报', iconBgColor: '#1890FF', path: '/TransitIndex/OaMeetApplicant/1' },
      { icon: 'icon-huiyishishiyong', title: '会议室管理', describe: '可新增会议室或使用会议室', iconBgColor: '#52C41A', path: '/TransitIndex/OaMeetRoom' },
      { icon: 'icon-huiyishishiyong', title: '会议室使用查询', describe: '会议室使用情况明细表', iconBgColor: '#FA8C16 ', path: '/TransitIndex/OaMeetRoomUseDetial' },
    ]
  },
  {
    title: '合同管理',
    children: [
      { icon: 'icon-hetongshenqing', title: '支出合同登记', describe: '会议申请填报', iconBgColor: '#1890FF', path: '/TransitIndex/Contract/2' },
      { icon: 'icon-hetongshenqing', title: '收入合同登记', describe: '可新增会议室或使用会议室', iconBgColor: '#52C41A', path: '/TransitIndex/Contract/1' },
      { icon: 'icon-hetongshenqing', title: '合同查询', describe: '会议室使用情况明细表', iconBgColor: '#FA8C16 ', path: '/TransitIndex/Contract/3' },
      { icon: 'icon-hetongshenqing', title: '合同收款方配置', describe: '会议室使用情况明细表', iconBgColor: '#13C2C2 ', path: '/TransitIndex/ContractCooperate' },
    ]
  },
  {
    title: '统计报表',
    children: [
      { icon: 'icon-tongjibaobiao-mian', title: '差旅统计', describe: '领取用品填报申请单', iconBgColor: '#1890FF', path: '/TransitIndex/TravelReport' },
      { icon: 'icon-tongjibaobiao-mian', title: '派车统计', describe: '领取申请审核数据', iconBgColor: '#52C41A', path: '/TransitIndex/SendCarReport' },
    ]
  },
  {
    title: '辅助功能',
    children: [
      { icon: 'icon-a-wodericheng1', title: '我的日程', describe: '快速申请人员请假', iconBgColor: '#1890FF', path: '/TransitIndex/MyCalender' },
      { icon: 'icon-zhishiku-mian', title: '知识库', describe: '请假人员审核快速审核', iconBgColor: '#52C41A', path: '/TransitIndex/KnowledgeStore' },
      { icon: 'icon-a-wendangguanli1', title: '文档查询', describe: '快速填报加班申请单', iconBgColor: '#FA8C16 ', path: '/TransitIndex/DocManager' },
      { icon: 'icon-tongxunlu-mian', title: '通讯录', describe: '快速申请人员请假', iconBgColor: '#13C2C2', path: '/TransitIndex/AddressBook' },
      { icon: 'icon-tianqiguanli', title: '天气信息', describe: '请假人员审核快速审核', iconBgColor: '#1890FF', path: '/TransitIndex/WeatherInfo' },
    ]
  },
])

// 快速跳转
const toJump = (data) => {
  if (data.type == 'newWindow') {
    window.open(data.path)
  }
  else {
    router.push({
      path: data.path,
      query: {
        _tab: '1',
        label: data.title,
      },
    })
  }
}

</script>

<style lang='scss' scoped>
.u-item-icon {
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px 16px 16px 16px;
  text-align: center;
}

.u-span-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.u-span-desc {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
</style>